<template>
    <div class="wrap header">
        <div><img src="@/assets/img/indexLogo.6f8ac4f0.png" alt="" /></div>
        <ul class="nav">
            <li :class="{ current: $route.path == '/home' }" @click="$router.push('/home')">
                首页
            </li>
            <li @click="$router.push('/goods')" :class="{ current: $route.path == '/goods' }">
                全部礼品
            </li>
            <li @click="$router.push('/user')" :class="{ current: $route.path == '/user' }">
                个人中心
            </li>
            <li @click="$router.push('/order')" :class="{ current: $route.path == '/order' }">
                我的订单
            </li>
            <li @click="$router.push('/free')" :class="{ current: $route.path == '/free' }">
                专属福利
            </li>
        </ul>
        <div class="search">
            <input type="text" placeholder="请输入关键字" />
            <div><img src="@/assets/img/search.png" alt="" /></div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data() {
        return {};
    },
    methods: {
        ...mapMutations({
            changeIsShowLogin: 'showlogin/changeIsShowLogin',
        }),
    },
};
</script>

<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    .nav {
        display: flex;
        width: 500px;
        justify-content: space-between;
        font-size: 16px;
        font-family: SourceHanSansSC;
        font-weight: 500;
        color: #333;
        li {
            cursor: pointer;
            &.current {
                color: #0a328e;
            }
        }
    }
    .search {
        display: flex;
        input {
            width: 214px;
            height: 40px;
            border: 1px solid #dedede;
            border-radius: 20px 0px 0px 20px;
            box-sizing: border-box;
            text-indent: 1em;
        }
        div {
            width: 50px;
            height: 40px;
            background: #0a328e;
            border-radius: 0px 20px 20px 0px;
            text-align: center;
            line-height: 40px;
        }
    }
}
</style>
